<script setup>
import {ref, onMounted} from 'vue'
import {queryAllDeptsApi, addDeptApi, queryDeptByIdApi, updateByIdApi, deleteByIDApi} from '@/api/dept.js'
import {ElMessage, ElMessageBox} from "element-plus";

const dept = ref({
  name:''
})
const deptData = ref([])
const dialogFormVisible=ref(false)
const formTitle=ref('')

const deptFormRef=ref()
// 校验规则
const rules = ref({
  name: [
    { required: true, message: '部门名称必填', trigger: 'blur' },
    { min: 2, max: 10, message: '部门名称长度在2到10位', trigger: 'blur' },
  ]
})

const search=async ()=>{
  const result =await queryAllDeptsApi()
  if(result.code){
    deptData.value=result.data
  }
}

const deleteByID = (id) => {
  ElMessageBox.confirm(
      '确定要删除该部门吗',
      '删除部门',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        const result=await deleteByIDApi(id)
        if(result.code){
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          search()
        } else{
          ElMessage.error(result.msg)
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: ' 您已取消删除',
        })
      })
}

const edit=async (id)=>{
  formTitle.value='编辑部门'
  const result=await queryDeptByIdApi(id)
  console.log(result.data)
  if(result.code){
    dialogFormVisible.value=true
    dept.value=result.data
  }
}
const addDept=()=>{
  dialogFormVisible.value=true
  formTitle.value='新增部门'
}
const save =async ()=>{
  // 校验表单
  deptFormRef.value.validate(async (valid)=>{
    if(valid){

      let result
      if(dept.value.id){
        result=await updateByIdApi(dept.value)
      } else{
        result=await addDeptApi(dept.value)
      }

      if(result.code){
        ElMessage({
          message: '操作成功',
          type: 'success',
        })
        dialogFormVisible.value=false
        search()
      }else{
        ElMessage.error('操作失败，部门已存在')
      }
    }else{
      ElMessage.error('表单校验不通过')
    }
  })


}
onMounted(()=>{
  search()

})

</script>

<template>
  <h1 id="title">部门管理</h1>
  <div id="btn-container">
    <el-button type="primary" @click="addDept">+新增部门</el-button>
  </div>

  <div id="table-container">
    <el-table :data="deptData" border style="width: 100%">
      <el-table-column type="index" label="部门序号" width="100" align="center"/>
      <el-table-column prop="name" label="部门名称" width="260" align="center"/>
      <el-table-column prop="updateTime" label="最后操作时间" width="300" align="center"/>
      <el-table-column  label="操作"  align="center">
        <template #default="scope">
          <el-button type="primary" size="small" @click="edit(scope.row.id)"><el-icon><Edit /></el-icon>编辑</el-button>
          <el-button type="danger" size="small" @click="deleteByID(scope.row.id)"><el-icon><Delete /></el-icon>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

<!--  dialog-->
  <el-dialog v-model="dialogFormVisible" :title="formTitle" width="500">
    <el-form :model="dept" :rules="rules" ref="deptFormRef">
      <el-form-item label="部门名称" label-width="80px" prop="name">
        <el-input v-model="dept.name" autocomplete="off" placeholder="请输入部门名称"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
#title {

}

#btn-container {
  margin: 10px 0px;
}
#table-container{
  margin: 10px 0px;
}
</style>
